<!-- 253 -->
<template>
  <div>
    <button @click="cs">测试</button>
    <t-query-form
      layout="inline"
      ref="form"
      :rules="rules"
      :model="form"
    >
    <a-row wrap="false" type="flex">
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
            <a-select
              v-model:value="form.shopId"
              show-search
              allow-clear
              @change="changeShopId"
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
    </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :span="15" class="global-oper-row-title">
        {{ $t("T9_byTransferJob") }}
      </a-col>
      <a-col>
        <a-button
          type="primary"
          :loading="searchBtnLoading"

          >{{ $t("T9_search") }}</a-button
        >
      </a-col>
    </a-row>
    <t-query-form
      layout="inline"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
      <a-row wrap="false" type="flex">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_transferJobId')"
            name="transferJobId"
            prop="transferJobId"
          >
            <a-input v-model:value="queryForm.transferJobId" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_transferCount')"
            name="transferCount"
            prop="transferCount"
          >
            <a-select
              v-model:value="queryForm.transferCount"
              show-search
              allow-clear
              @change="changetransferCount"
            >
              <a-select-option
                v-for="item in transferCountArr"
                :key="item.index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_toPortTransferCount')"
            name="toPortTransferCount"
            prop="toPortTransferCount"
          >
            <a-select
              v-model:value="queryForm.toPortTransferCount"
              show-search
              allow-clear
              @change="changetoPortTransferCount"
            >
              <a-select-option
                v-for="item in toPortTransferCountArr"
                :key="item.index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :span="22" class="global-oper-row-title">
        {{ $t("T9_byCst") }}
      </a-col>
      <a-col :span="2" style="text-align: right">
        <a-button
          type="primary"
          :loading="searchBtnLoading"
          @click="getDataList('search')"
          >{{ $t("T9_search") }}</a-button
        >
      </a-col>
    </a-row>
    <t-query-form
      layout="inline"
      ref="dateForm"
      :rules="rules"
      :model="dateForm"
    >
      <a-row wrap="false" type="flex">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_cstId')"
            name="cstId"
            prop="cstId"
          >
            <a-input v-model:value="queryForm.cstId" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_fromEqId')" name="fromEqId" prop="fromEqId">
            <a-select
              v-model:value="queryForm.fromEqId"
              show-search
              allow-clear
              @change="changefromEqId"
            >
              <a-select-option
                v-for="item in fromEqIdArr"
                :key="item.index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_toEqId')" name="toEqId" prop="toEqId">
            <a-select
              v-model:value="queryForm.toEqId"
              show-search
              allow-clear
              @change="changetoEqId"
            >
              <a-select-option
                v-for="item in toEqIdArr"
                :key="item.index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_jobCreator')" name="jobCreator" prop="jobCreator">
            <a-select
              v-model:value="queryForm.jobCreator"
              show-search
              allow-clear
              @change="changejobCreator"
            >
              <a-select-option
                v-for="item in jobCreatorArr"
                :key="item.index"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item :label="$t('T9_date')" name="date">
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              :default-value="dateForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              @change="onChange"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          {{$t("T9_includeLocationChange")}}
          <a-radio-group v-model:value="radioValue" style="margin-top: 5px">
            <a-radio :style="radioStyle" :value="1">{{ $t("T9_yes") }}</a-radio>
            <a-radio :style="radioStyle" :value="2">{{ $t("T9_no") }}</a-radio>
          </a-radio-group>
        </a-col>
        <a-col :span="6">
          <a-checkbox style="margin-top: 5px" v-model:checked="checked">
            {{ $t("T9_reload") }}
          </a-checkbox>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_transferJobHistoryList")
      }}</a-col>
      <a-col :span="6" class="global-oper-row-extra">
        <a-button type="primary" @click="getDataList('export')">{{
          $t("T9_toExcel")
        }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
      <t-table :data="table.data" max-height="100%">
        <t-column field="eventTime" :title="$t('T9_eventTime')" min-width="100" />
        <t-column field="eventName" :title="$t('T9_eventName')" min-width="100" />
        <t-column field="transferJobId" :title="$t('T9_transferJobId')"  min-width="140"/>
        <t-column field="productId" :title="$t('T9_productId')" min-width="100"/>
        <t-column field="owner" :title="$t('T9_owner')" min-width="100" />
        <t-column field="operation" :title="$t('T9_operation')" min-width="100"/>
        <t-column field="glassQty" :title="$t('T9_glassQty')" min-width="100"/>
        <t-column field="sourceEqId" :title="$t('T9_sourceEqId')" min-width="100"/>
        <t-column field="destinationEqId" :title="$t('T9_destinationEqId')" min-width="140" />
        <t-column field="transferState" :title="$t('T9_transferState')" min-width="100"/>
        <t-column field="eventUser" :title="$t('T9_eventUser')" min-width="100"/>
        <t-column field="eventComment" :title="$t('T9_eventComment')" min-width="120" />
        <t-column field="priority" :title="$t('T9_priority')" min-width="100" />
        <t-column field="transferCount" :title="$t('T9_transferCount')" min-width="120" />
        <t-column field="sourcePortId" :title="$t('T9_sourcePortId')" min-width="120" />
        <t-column field="sourceZoneId" :title="$t('T9_sourceZoneId')" min-width="120" />
        <t-column field="destinationZoneId" :title="$t('T9_destinationZoneId')" min-width="140" />
        <t-column field="destinationPortId" :title="$t('T9_destinationPortId')" min-width="140" />
        <t-column field="toPortTransferCount" :title="$t('T9_toPortTransferCount')" min-width="160" />
        <t-column field="currentEqId" :title="$t('T9_currentEqId')" min-width="100" />
        <t-column field="currentZoneId" :title="$t('T9_currentZoneId')" min-width="120" />
        <t-column field="currentPortId" :title="$t('T9_currentPortId')" min-width="120" />
        <t-column field="reasonCode" :title="$t('T9_reasonCode')" min-width="100" />
        <t-column field="errorMessage" :title="$t('T9_errorMessage')" min-width="120" />
        <t-column field="resultText" :title="$t('T9_resultText')" min-width="100" />
        <t-column field="cstCleanState" :title="$t('T9_cstCleanState')" min-width="120" />
        <t-column field="replyTime" :title="$t('T9_replyTime')" min-width="100" />
        <t-column field="startTime" :title="$t('T9_startTime')" min-width="100" />
        <t-column field="completeTime" :title="$t('T9_completeTime')" min-width="120" />
        <t-column field="cstId" :title="$t('T9_cstId')" min-width="100" />
        <t-column field="cstHoldState" :title="$t('T9_cstHoldState')" min-width="120" />
        <t-column field="fromSite" :title="$t('T9_fromSite')" min-width="100" />
      </t-table>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { getCurrentDate } from '@/utils/utils'
  import { getEqpId } from '@/api/viewTransferJobHistor'

  export default {
    name: 'ViewTransferJobHistor',
    components: {},
    data() {
      return {
        table: {
          list: []
        },
        checked: false,
        radioValue: 2,
        shopIdArr: [{ shopId: 'ARRAY' }, { shopId: 'CF' }, { shopId: 'Cell' }],
        transferCountArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        toPortTransferCountArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        fromEqIdArr: ['后端传数据'],
        toEqIdArr: ['后端传数据'],
        jobCreatorArr: ['', 'OPI', 'MCS', 'DSP'],
        form: {
          shopId: ''
        },
        queryForm: {
          transferJobId: '',
          transferCount: '',
          toPortTransferCount: ''
        },
        dateForm: {
          cstId: '',
          fromEqId: '',
          toEqId: '',
          jobCreator: '',
          Date: []
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'blur'
            }
          ],
          transferJobId: [
            {
              required: true,
              message: this.$t('T9_transferJobId'),
              trigger: 'blur'
            }
          ],
          cstId: [
            {
              required: true,
              message: this.$t('T9_cstId'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.dateForm.Date = [
        moment(getCurrentDate(), 'YYYY-MM-DD HH:mm'),
        moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm')
      ]
    },
    methods: {
      cs() {
        console.log('验证时间选择器')
        console.log(this.dateForm.Date)
      },
      onChange(value) {
        this.dateForm.Date = value
      },
      changeShopId() {
        console.log('这是选择的shopId', this.form.shopId)
        const params = {
          shopId: 'CELL'
        }
        getEqpId(params).then((res) => {
          console.log(res)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
.tableArea {
  width: 100%;
  height: 22vh;
  padding-bottom: 8px;
}
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.textAreaForm {
  /deep/ .ant-input {
    // width: auto!important;
    height: 32px;
  }
}
</style>
